---
slug: /plugins/mention
title: Mention
---

### `useMentionPlugin`

```ts live
() => {
  const renderMentionLabel = (mentionable) => {
    const entry = MENTIONABLES.find((m) => m.value === mentionable.value);
    if (!entry) return 'unknown option';
    return `${entry.name} - ${entry.email}`;
  };

  const styledComponents = createPlateComponents({
    ...components,
    [ELEMENT_MENTION]: withProps(MentionElement, {
      renderLabel: renderMentionLabel,
    }),
  });

  const optionsMentionPlugin = {
    mentionables: MENTIONABLES,
    maxSuggestions: 10,
    insertSpaceAfterMention: false,
    trigger: '@',
    mentionableFilter: (s) => (mentionable) =>
      mentionable.email.toLowerCase().includes(s.toLowerCase()) ||
      mentionable.name.toLowerCase().includes(s.toLowerCase()),
    mentionableSearchPattern: '\\S*',
  };

  const Editor = () => {
    const { getMentionSelectProps, plugin: mentionPlugin } = useMentionPlugin(
      optionsMentionPlugin
    );

    const plugins = useMemo(
      () => [
        ...pluginsBasic,
        mentionPlugin,
      ],
      [mentionPlugin]
    );

    return (
      <Plate
        id="mention"
        plugins={plugins}
        components={styledComponents}
        options={options}
        editableProps={editableProps}
        initialValue={initialValueMentions}
      >
        <MentionSelect
          {...getMentionSelectProps()}
          renderLabel={renderMentionLabel}
        />
      </Plate>
    );
  };

  return <Editor />
}
```